<template>
  <div>
    <div style="height:36px;box-sizing:border-box">
      <span style="font-weight:bold;color:#676A6C">交易列表</span>

      <div style="display:inline-block;float:right" class="block">
        <span style="background-color:#EEEEEE;display:inline-block;line-height:32px;height:32px;vertical-align:middle;color:#676A6C;margin-left:14px"
          class="demonstration">&nbsp;时间范围&nbsp;</span>
        <el-date-picker v-model="dateGap" size="small" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" :picker-options="pickerOptions" />&emsp;
        <el-button type="success" size="medium" @click="handleSearch">查询</el-button>
        <el-button type="info" size="medium">导入</el-button>
        <el-button type="warning" size="medium">下载模板</el-button>
        <el-button type="warning" size="medium">导出</el-button>
        <el-button type="warning" size="medium">打印追溯小票</el-button>
      </div>
    </div>
    <div style="text-align:right;margin-top:14px;padding-top:14px;border-top:1px solid rgb(231, 234, 236)">
      <el-input v-model.trim="keyWord" style="width:15em" size="medium" placeholder="请输入经营户或追溯码" />&emsp;
      <el-radio v-model="radio" :label="0">经营户</el-radio>
      <el-radio v-model="radio" :label="1">追溯码</el-radio>
      <el-button icon="el-icon-refresh" style="font-size:20px;vertical-align:bottom" type="info" size="mini" title="刷新" @click="handleFresh" />
    </div>
    <el-table v-loading="loading" border style="margin-top:14px;width:100%" :data="tableData">
      <el-table-column label="序号" type="index" :show-overflow-tooltip="true" width="60" />
      <el-table-column label="订单号" prop="billId" :show-overflow-tooltip="true" width="220" sortable />
      <el-table-column label="交易时间" prop="insertDateTime" :formatter="timeFormat" :show-overflow-tooltip="true" width="170" />
      <el-table-column label="经营户" prop="ecrInfo.busiInfo.busiName" :show-overflow-tooltip="true" />
      <el-table-column label="电子秤编号" prop="ecrInfo.ecrID" min-width="100" :show-overflow-tooltip="true" />
      <el-table-column label="电子秤唯一编号" prop="ecrInfo.mac.uniNum" min-width="100" :show-overflow-tooltip="true" />
      <el-table-column label="商品名称" prop="goodsCode" :show-overflow-tooltip="true" />
      <el-table-column label="重量" prop="wight" :formatter="weightFormat" :show-overflow-tooltip="true" />
      <el-table-column label="单价" prop="unitePrice" :formatter="unitPriceFormat" :show-overflow-tooltip="true" />
      <el-table-column label="价格" prop="price" :formatter="priceFormat" :show-overflow-tooltip="true" />
      <el-table-column label="追溯码" prop="traceCode" :show-overflow-tooltip="true">
        <!-- <template>未知</template> -->
      </el-table-column>
      <el-table-column label="上链状态" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.traHash" :enterable="false">
            <div slot="content">
              <div v-if="scope.row.isClicked">
                <div class="tip">
                  <span class="tip-title">交易hash:&nbsp;</span>
                  <span class="tip-content">{{ scope.row.traHash }}</span>
                </div>
                <div class="tip">
                  <span class="tip-title">订单号:&nbsp;</span>
                  <span class="tip-content">{{ scope.row.BtxNumber }}</span>
                </div>
                <div class="tip">
                  <span class="tip-title">交易时间:&nbsp;</span>
                  <span class="tip-content">{{ scope.row.Btime | timeFormat }}</span>
                </div>
                <div class="tip">
                  <span class="tip-title">市场:&nbsp;</span>
                  <span class="tip-content">{{ scope.row.BmarketName }}</span>
                </div>
                <div class="tip">
                  <span class="tip-title">经营户:&nbsp;</span>
                  <span class="tip-content">{{ scope.row.BbusinessName }}</span>
                </div>
                <div class="tip">
                  <span class="tip-title">电子秤编号:&nbsp;</span>
                  <span class="tip-content">{{ scope.row.BecrNumber }}</span>
                </div>
                <div class="tip">
                  <span class="tip-title">电子秤MAC:&nbsp;</span>
                  <span class="tip-content">{{ scope.row.BecrMac }}</span>
                </div>
                <div class="tip">
                  <span class="tip-title">识别结果:&nbsp;</span>
                  <span class="tip-content">{{ scope.row.Bidentification }}</span>
                </div>
                <div class="tip">
                  <span class="tip-title">单价:&nbsp;</span>
                  <span class="tip-content">{{ scope.row.BunitPrice }}</span>
                </div>
                <div class="tip">
                  <span class="tip-title">重量:&nbsp;</span>
                  <span class="tip-content">{{ scope.row.Bweight }}</span>
                </div>
                <div class="tip">
                  <span class="tip-title">总价:&nbsp;</span>
                  <span class="tip-content">{{ scope.row.BtotalPrice }}</span>
                </div>
                <div class="tip">
                  <span class="tip-title">数据状态:&nbsp;</span>
                  <span :class="{'tip-content':scope.row.state,'red':!scope.row.state}">{{ scope.row.state ? '正常':'异常' }}</span>
                </div>
              </div>
              <div v-else class="tip">
                <span class="tip-title">交易hash:&nbsp;</span>
                <span class="tip-content">{{ scope.row.traHash }}</span>
              </div>
            </div>

            <span :style="style[count]" class="calHash" @click="handleQuery(scope.row)">上链成功</span>
          </el-tooltip>

          <span v-else>正在上链</span>
        </template>
      </el-table-column>
      <el-table-column type="selection" />
    </el-table>
    <vpage :is-public="1" :currentpage="filterData['page.pageNum']" :pagesizes="[ 10 ,20, 30, 40]" layout=" total, sizes, prev, pager, next, jumper"
      :pagesize="filterData['page.pageSize']" :total="totalsize" @sizechange="handleSizeChange" @currentchange="handleCurrentChange" />
  </div>
</template>
<script>
import { retrieveDealInfo, retrieveHashInfo } from '@/api/market.js'
import vpage from '@/components/Pagination/index'
import { timeFormat } from '@/utils/common.js'
export default {
  name: 'Deal',
  filters: {
    timeFormat: function(val) {
      return timeFormat(val, 'YYYY-MM-DD HH:mm:ss')
    }
  },
  components: {
    vpage
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      timer: '', // 计时器
      count: 0,
      style: [
        {
          color: '#409EFF'
        },

        // {
        //   color: "#909399"
        // },

        {
          color: '#E6A23C'
        },
        {
          color: '#67C23A'
        }
      ], // 样式
      radio: 0, // 搜索字段
      dateGap: [], // 日期间隔
      keyWord: '', // 搜索关键词
      tableData: [], // 表格数据
      // 接口参数
      filterData: {
        'page.pageSize': 10,
        'page.pageNum': 1,
        start: '1970-01-01 00:00:00',
        end: '2099-12-31 23:59:59'
        // busiName: "",
        // traceCode: ""
      },
      totalsize: 0, // 表格总条数
      loading: true // 表格加载中
    }
  },
  watch: {
    dateGap: function(newVal, oldVal) {
      if (newVal == null || (newVal.length === 0 && oldVal.length == 2)) {
        this.filterData.start = '1970-01-01 00:00:00'
        this.filterData.end = '2099-12-31 23:59:59'
      }
    }
  },
  created() {
    this.initDataList()
    this.timer = setInterval(() => {
      this.count = ++this.count % 3
    }, 600)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    console.log('清除定时器')
  },
  methods: {
    // 初始化表格数据
    initDataList() {
      this.loading = true
      if (this.keyWord === '') {
        if (typeof this.filterData.busiName != 'undefined') { delete this.filterData.busiName } else if (typeof this.filterData.traceCode != 'undefined') { delete this.filterData.busiName }
      }
      console.log(this.filterData)
      retrieveDealInfo(this.filterData).then(res => {
        this.tableData = res.data.content
        this.totalsize = res.data.totalSize
        this.loading = false
        this.tableData.forEach(item => this.$set(item, 'isClicked', false))
        console.log(res.data)
      })
    },
    // 时间段查询数据
    handleSearch() {
      if (this.dateGap.length > 0) {
        this.filterData.start = this.dateGap[0] + ' 00:00:00'
        this.filterData.end = this.dateGap[1] + ' 23:59:59'
        this.initDataList()
      } else {
        this.$message.warning('请先选择日期')
      }
      console.log(this.dateGap)
    },
    // 刷新经营户或追溯码
    handleFresh() {
      if (!this.radio) {
        this.filterData.busiName = this.keyWord
        delete this.filterData.traceCode
      } else {
        delete this.filterData.busiName
        this.filterData.traceCode = this.keyWord
      }
      this.initDataList()
    },

    handleQuery(row) {
      // 调接口渲染数据
      retrieveHashInfo(row.traHash).then(res => {
        this.$set(row, 'BunitPrice', res.data.unitPrice)
        this.$set(row, 'BmarketName', res.data.marketName)
        this.$set(row, 'Bidentification', res.data.identification)
        this.$set(row, 'BecrNumber', res.data.ecrNumber)
        this.$set(row, 'BtotalPrice', res.data.totalPrice)
        this.$set(row, 'BbusinessName', res.data.businessName)
        this.$set(row, 'Bweight', res.data.weight)
        this.$set(row, 'BecrMac', res.data.ecrMac)
        this.$set(row, 'BtxNumber', res.data.txNumber)
        this.$set(row, 'Btime', res.data.time)
        this.$set(row, 'isClicked', true)
        let error = 0

        if (row.billId != row.BtxNumber){
          error = 1
        }
        if (row.ecrInfo.busiInfo.busiName != row.BbusinessName){
          error = 2
        }
        if (row.ecrInfo.ecrID != row.BecrNumber){
          error = 3
        }
        if (row.ecrInfo.mac.uniNum != row.BecrMac){
          error = 4
        }
        // if (row.goodsCode != row.Bidentification){
        //   error = 5
        // }
        if (row.wight != row.Bweight){
          error = 6
        }
        if (row.unitePrice != row.BunitPrice){
          error = 7
        }
        if (row.price != row.BtotalPrice){
          error = 8
        }
        // if (row.traceCode != row.Bweight){
        //   error = 6
        // }
        console.log(error)
        this.$set(row, 'state', error === 0)
        console.log(row)
      })
    },

    // 表格数据格式化
    // 重量格式化
    weightFormat(val) {
      return val.wight.toFixed(2) + 'KG'
    },
    // 单价格式化
    unitPriceFormat(val) {
      return val.unitePrice.toFixed(2) + '元/KG'
    },
    // 价格格式化
    priceFormat(val) {
      return val.price.toFixed(2) + '元'
    },
    // 控制每页数据大小
    handleSizeChange(val) {
      this.filterData['page.pageSize'] = val
      this.initDataList()
    },
    // 控制当前页数据
    handleCurrentChange(val) {
      this.filterData['page.pageNum'] = val
      this.initDataList()
    }
  }
}
</script>
<style>
.el-date-editor .el-range-separator {
  background-color: #eeeeee !important;
  padding: 5px 5px !important;
  font-size: 14px !important;
  color: #676a6c !important;
}
.calHash {
  cursor: pointer;
}
.tip {
  line-height: 25px;
  font-family: "黑体";
  font-size: 16px;
  display: block;
  min-width: 15em;
}
.tip-content {
  color: #4fd222;
}
.red {
  color: red;
}
</style>
